<template>
  <div class="con">
    <!-- <el-form ref="forma" :model="forma" :rules="forma" label-position="right">
      <el-row :gutter="4">
        <el-col :span="8">
          <el-form-item label="时间：" label-width="60px">
            <el-date-picker
              v-model="timeArray"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width:100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="标题：" label-width="80px" prop="title">
            <el-input v-model="forma.title" placeholder="请输入标题"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" style="padding-left:40px">
          <el-button type="primary" @click="showeAdd">新增</el-button>
          <el-button type="primary" @click="currentChange(1)">查询</el-button>
          <el-button type="primary" @click="resetForm('forma')">重置</el-button>
        </el-col>
      </el-row>
    </el-form>-->

    <el-table id="dataTable" :data="dataTable" border max-height="650" style="margin-top:20px">
      <el-table-column prop="title" label="标题" width="300" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column label="名师简介" align="center">
        <template slot-scope="{row}">
          <el-popover
            placement="top-start"
            title="名师简介"
            width="600"
            trigger="hover"
            :content="row.myjs"
          >
            <div
              slot="reference"
              style="white-space: nowrap;overflow: hidden;text-overflow:ellipsis;"
            >{{row.myjs}}</div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="adduser" label="添加人" width="120" align="center"></el-table-column>
      <el-table-column prop="fbsj" label="创建日期" width="120" align="center"></el-table-column>
      <el-table-column label="操作" align="center" width="240" >
        <template slot-scope="scope">
          <div>
            <el-button
              class="operation"
              type="primary"
              size="mini"
              @click="showeEdit(scope.$index, scope.row)"
            >修改</el-button>
            <!-- <el-button
              class="operation"
              type="danger"
              size="mini"
              @click="showDelte(scope.$index, scope.row)"
            >删除</el-button> -->
            <el-button
              class="operation"
              type="info"
              size="mini"
              @click="showDetail(scope.$index, scope.row)"
            >详情</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- <el-pagination
      style="margin-top: 20px;text-align:center"
      background
      :current-page="listQuery.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="listQuery.limit"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="sizeChange"
      @current-change="currentChange"
      :total="listQuery.total"
    ></el-pagination>-->

    <!-- 新增弹窗 -->
    <el-dialog title="添加名医风采" :visible.sync="addDialogVisible" width="60%" center>
      <el-form ref="addForm" :model="addForm" :rules="rules" label-width="100px">
        <el-form-item label="标题：" prop="title">
          <el-input v-model="addForm.title"></el-input>
        </el-form-item>
        <!-- <el-form-item label="作者：" prop="adduser">
          <el-input v-model="addForm.adduser"></el-input>
        </el-form-item>-->
        <el-form-item label="名师简介：" prop="myjs">
          <Editor class="editer" v-model="addForm.myjs" />
        </el-form-item>
        <el-form-item style="text-align:center">
          <el-button type="primary" @click="addSubmit">确认提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 修改弹窗 -->
    <el-dialog title="修改名医风采" :visible.sync="editDialogVisible" width="60%" center>
      <el-form ref="editForm" :model="editForm" :rules="rules" label-width="100px">
        <el-form-item label="标题：" prop="title">
          <el-input v-model="editForm.title"></el-input>
        </el-form-item>
        <!-- <el-form-item label="作者：" prop="adduser">
          <el-input v-model="editForm.adduser"></el-input>
        </el-form-item>-->
        <el-form-item label="名师简介：" prop="myjs">
          <Editor class="editer" v-model="editForm.myjs" />
        </el-form-item>
        <el-form-item style="text-align:center">
          <el-button type="primary" @click="editSubmit">确认提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 查看弹窗 -->
    <el-dialog title="查看名医风采" :visible.sync="detailDialogVisible" width="60%" center>
      <el-form ref="detailForm" :model="detailForm" label-width="100px">
        <el-form-item label="标题：" prop="title">
          <span>{{detailForm.title}}</span>
        </el-form-item>
        <!-- <el-form-item label="作者：" prop="adduser">
          <span>{{detailForm.adduser}}</span>
        </el-form-item>-->
        <el-form-item label="名师简介：" prop="myjs">
          <div v-html="detailForm.myjs" class="showdia">{{detailForm.myjs}}</div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import { myMixin } from "../../assets/js/mixin";
import Editor from "../../components/Editor";
export default {
  mixins: [myMixin],
  components: { Editor },
  filters: {},
  props: {
    type: String, // add edit
  },
  data() {
    return {
      timeArray: [],
      forma: {
        title: "",
      },
      listQuery: {
        page: 1, //页码
        limit: 10, //每页条数
        total: 0,
      },
      //表单验证
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        myjs: [
          { required: true, message: "请输入详细名师简介", trigger: "blur" },
        ],
      },
      dataTable: [],
      // 新增弹框
      addDialogVisible: false,
      addForm: {
        title: "",
        // adduser: "",
        myjs: "",
      },
      // 修改弹框
      editDialogVisible: false,
      editForm: {
        title: "",
        // adduser: "",
        myjs: "",
      },
      // 查看
      detailDialogVisible: false,
      detailForm: {
        title: "",
        // adduser: "",
        myjs: "",
      },
    };
  },
  created() {
    this.search();
  },
  methods: {
    //查询请求
    search() {
      let query = this.queryDate();
      this.handleMyfcSearch(query, "TCM/myfc");
      console.log(this.dataTable);
    },
    // 重置
    resetForm() {
      this.$refs.forma.resetFields();
      this.timeArray = [];
    },
    // 搜索的请求参数
    queryDate() {
      let query = {
        ...this.forma,
        page: this.listQuery.page,
        limit: this.listQuery.limit,
      };
      if (this.timeArray && this.timeArray.length == 2) {
        query.orderCreateQueryStart = this.timeArray[0];
        query.orderCreateQueryEnd = this.timeArray[1];
      }
      return query;
    },
    addQuery(form) {
      let query = {
        ...this.addForm,
        adduser: JSON.parse(window.localStorage.user).uRealName,
        id: "",
      };
      return query;
    },
    sizeChange(pageSize) {
      this.listQuery.limit = pageSize;
      this.currentChange(1);
    },
    currentChange(pageNum) {
      this.listQuery.page = pageNum;
      this.search();
    },
    showeAdd() {
      this.addDialogVisible = true;
    },
    addSubmit() {
      let query = this.addQuery();
      this.handleAdd(query, "UpdTCM/myfc");
    },
    showeEdit(id, row) {
      this.editDialogVisible = true;
      this.editForm = JSON.parse(JSON.stringify(this.dataTableOrigin[id]));//
    },
    editSubmit() {
      let query = {
        ...this.editForm,
        adduser: JSON.parse(window.localStorage.user).uRealName,
      };
      this.handleEdit(query, "UpdTCM/myfc");
    },
    showDetail(id, row) {
      this.detailDialogVisible = true;
      this.detailForm= JSON.parse(JSON.stringify(this.dataTableOrigin[id]));//
      console.log(this.detailForm);
    },
    showDelte(id, row) {
      let query = {
        type: "3",
        id: row.id.toString(),
      };
      // 删除接口
      this.handleDelete(query, "UpdTCM/delDetail");
      // this.search();
    },
  },
};
</script>

<style>
.page-container {
  font-size: 25px;
  text-align: center;
  color: rgb(192, 204, 218);
}
.con {
  padding: 10px 20px 0;
}
</style>
